<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-08 07:51:53
 * @LastEditTime: 2019-11-06 19:30:15
 * @LastEditors: Please set LastEditors
 -->
<template>
  <view class="login-page">
    <view class="contain">
      <view class="login-box">
        <view class="header">
          <!-- <image
            src="../static/images/login-logo.png"
            mode="scaleToFill"
            lazy-load="false"
          >
          </image> -->
        </view>
        <view class="content">
          <view class="account item">
            <view class="label">
              <image
                src="../static/images/icon_account.png"
                mode="scaleToFill"
                lazy-load="false"
              >
              </image>
            </view>
            <view class="fill">
              <input
                type="text"
                placeholder="请输入手机号码"
                @input="getPhoneNum"
                placeholder-style="color:#ffffff"
              />
            </view>
          </view>
          <view class="account item">
            <view class="label">
              <image
                src="../static/images/icon_password.png"
                mode="scaleToFill"
                lazy-load="false"
              >
              </image>
            </view>
            <view class="fill">
              <input
                type="password"
                placeholder="请输入密码"
                @input="getPassword"
                placeholder-style="color:#ffffff"
              />
            </view>
          </view>
        </view>
        <view class="login-btn" @click="login">登录</view>
        <!-- <view class="forget-password">
                忘记密码
            </view> -->
      </view>
    </view>
  </view>
</template>
<script>
import Vue from "vue";
import InterServer from "@/common/config/server";
import { localStorageSyncServer } from "@/common/js/common";
let intervaler = null;
export default {
  data() {
    return {
      phoneNum: "", //手机号
      password: "", //验证码
    };
  },
  onShow() {
    // #ifdef H5
    document.title = `登录`;
    // #endif
    InterServer.loginTest({}).then((res) => {
      if (res.code == 200) {
        uni.navigateTo({
          url: "./index",
        });
      }
    });
  },
  onHide() {
    //clearInterval(intervaler);
  },
  onUnload() {
    clearInterval(intervaler);
  },

  methods: {
    //获取手机号
    getPhoneNum(e) {
      this.phoneNum = e.detail.value;
    },
    getPassword(e) {
      this.password = e.detail.value;
    },
    //登录
    login() {
      let phoneNum = this.phoneNum;
      let password = this.password;
      if (phoneNum == "") {
        return Vue.showCustomToast("请输入用户名");
      }
      if (password == "") {
        return Vue.showCustomToast("请输入用密码");
      }
      InterServer.loginNew({
        username: phoneNum,
        password: password,
      }).then((res) => {
        if (res.code == 200) {
          location = "/"
        }
      });
      // })
    },
  },
};
</script>
<style lang="less" scoped>
page {
  width: 100%;
  height: 100%;
  background: blue;
}
.login-page {
  width: 100%;
  height: 100vh;
  background: url("../static/images/login-bg.jpeg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  .contain {
    width: 100%;
    height: 100%;
    background: rgba(59, 59, 59, 0.5);
    overflow: hidden;
    .login-box {
      width: 675upx;
      height: 1046upx;
      margin: 100upx auto 0;
      overflow: hidden;
      .header {
        width: 301upx;
        height: 92upx;
        margin: 118upx auto 168upx;
        image {
          width: 282upx;
          height: 88upx;
        }
      }
      .content {
        .item {
          display: flex;
          width: 460upx;
          height: 50upx;
          margin: 0 auto 83upx;
          position: relative;
          align-items: center;
          border-bottom: 1upx solid #ffffff;
          .label {
            padding: 0 48upx 0 17upx;
            image {
              width: 28upx;
              height: 28upx;
            }
          }
          input {
            height: 40upx;
            line-height: 40upx;
            font-size: 28upx;
            color: #ffffff;
            .placeholder-text {
              font-size: 28upx;
              height: 40upx;
              line-height: 40upx;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: #ffffff;
            }
          }

          .get-code {
            height: 44upx;
            text-align: center;
            color: #ffffff;
            line-height: 44upx;
            border-radius: 10upx;
            font-size: 28upx;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 999;
            border-radius: 42upx;
            font-size: 28upx;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &-text {
              width: 172upx;
              display: block;
              height: 44upx;
              line-height: 44upx;
              font-size: 30upx;
              font-family: PingFang-Semibold;
              font-weight: bold;
              color: rgba(50, 50, 50, 1);
              margin-left: 17upx;
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 2px 4px rgba(125, 191, 249, 0.35);
              border-radius: 22upx;
            }
          }
          .line {
            width: 1upx;
            height: 40upx;
            background: rgba(214, 214, 214, 1);
          }
        }
        .password {
          .lf {
            display: flex;
            width: 271upx;
            border-bottom: 1upx solid #ffffff;
          }
        }
      }
      .login-btn {
        margin: 0 auto;
        margin-top: 123upx;
        font-size: 36upx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 58upx;
        width: 512upx;
        height: 58upx;
        background: rgba(0, 136, 255, 1);
        box-shadow: 0upx 6upx 6upx rgba(1, 75, 132, 0.52);
        border-radius: 29upx;
      }
      .forget-password {
        font-size: 30upx;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(35, 106, 246, 1);
        line-height: 30upx;
        text-align: center;
        margin-top: 116upx;
      }
    }
  }
}
</style>
